<template>
  <!-- 登录 -->
  <div>
    <van-nav-bar title="支付密码设置" left-arrow @click-left="onClickLeft" />
    <div class="nav">
      <van-cell-group>
        <van-field v-model="username" class="iconfont icon-shouji phone" center placeholder="请输入手机号"/>
        <div class="yzm">
          <van-field v-model="sms" center clearable placeholder="验证码" class="sms" >
          </van-field>
          <van-button slot="button" size="small" type="primary" class="button">获取验证码</van-button>
        </div>
        <van-field v-model="password" class="iconfont icon-wode-zhifumima phone" center placeholder="请输入密码"/><span class="iconfont icon-biyan"></span>
        <van-field v-model="qrpassword" class="iconfont icon-wode-zhifumima phone" center placeholder="请确认密码"/><span class="iconfont icon-biyan"></span>
        <van-button round type="info" @click="reg" class="login">完成</van-button>
      </van-cell-group>
</div>
    </div>

  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    name: 'PaymentCode',
    data() {
      return {
        username:'',
        password:'',
        qrpassword: '',
        sms: '',
        yqma:'',
      }
    },
    methods: {
      onClickLeft() {
        this.$router.go(-1)
      },
      reg(){
        this.$store.commit('login',this.username)
        this.$store.commit('reg',this.password)
        console.log(this.$store.state.usernames)
        console.log(this.$store.state.passwords)
        if(this.$store.state.usernames==''){
            this.$toast('手机号不能为空')
          }
         else if(/^(13[0-9]|14[0-9]|15[0-9]|18[0-9]|17[0-9])\d{8}$/.test(this.$store.state.usernames)!=true){
          this.$toast('手机号格式不正确')
        }
        else if(this.$store.state.passwords==''){
           this.$toast('密码不能为空')
         }
        else if(this.qrpassword!=this.$store.state.passwords){
          this.$toast('密码输入不一致')
        }
        else{
          axios.post('http://api.cat-shop.penkuoer.com/api/v1/auth/reg', {
              userName:this.$store.state.usernames,
              password:this.$store.state.passwords,
              nickName:'11',
              avatar:''
            })
            .then(function (response) {
              console.log(response);
              this.$router.push("/register")
            })
            .catch(function (error) {
              console.log(error);
              this.$router.push("/login")
            });
        }
      }
    },
  }
</script>

<style scoped="">
 body{
    display: flex;
    flex-direction: column;
  }

  .van-nav-bar__title{
    color: #fff;
    font-size: 14px;
  }
  .van-nav-bar{
    height: 46px;
    background: #d46170;
  }
  .van-field__control::placeholder{
    color: #c5c9ca;
  }
  .van-icon, .van-icon::before{
    color:#FFF;
    font-size: 12px;
  }
  .van-nav-bar__text{
    color:#fff;
    font-size: #12px;
  }
.nav{
  margin-top: 44px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }
  .icon-shouji:before,.icon-mima:before,.icon-wode-zhifumima:before{
    font-size: 20px;
    color: #b85261;
    margin-right: 13px;
  }

.icon-biyan:first-of-type{
    position: absolute;
    top:110px;
    right:30px;
    color: #8d9194;
  }
  .icon-biyan:nth-of-type(2){
    position: absolute;
    top:160px;
    right:30px;
    color: #8d9194;
  }
    .nav .phone,
  .nav .sms {
      background: #eff3f4;
      font-size: 12px;
    }
    .nav .phone {
      width: 276px;
      height: 36px;
      margin: 0 auto;
      margin-bottom: 14px;
      border-radius: 18px;
    }

  .nav .yzm {
    width: 276px;
    height: 36px;
    margin: 0 auto;
    margin-bottom: 14px;
    display: flex;
    justify-content: space-between;
  }

  .nav .button {
    height: 36px;
    width: 84px;
    border-radius: 18px;
    background: #fcabb2;
    border: 0;
  }

  .nav .sms {
    width: 184px;
    height: 36px;
    border-radius: 18px;
  }

  .nav .login {
    width: 276px;
    height: 36px;
    background: #d46170;
    border: 0;
    margin: 0 0 26px 0;
  }

  .nav a {
    color: #d46170;
    width:256px;
    font-size: 12px;
    display: block;
    text-align: right;
    margin: 0 auto;
    margin-bottom: 38px;
  }
</style>
